<template>
    <div>
        <input v-focus type="text">
        <p v-red="'red'">v-red</p>
        <!-- 使用全局自定义指令 -->
        <p v-font30="'30px'">全局自定义指令</p>

        <!-- 获取鼠标的位置 -->
        <p>x:{{ x }}, y:{{ y }}</p>
    </div>
</template>

<script setup>
// 自定义指令: 操作dom
// 自定义指令名:  v指令名  注意: 指令名首字母大写

// 自定义指令分类: 局部自定义指令 和 全局自定义指令

const vFocus = {
    mounted(el) {
        console.log('el', el);
        el.focus()
    }
}

const vRed = {
    mounted(el, binding) {
        console.log('el', el);
        el.style.color = binding.value
    }
}

import { usemouse } from '@/utils/mouse'
console.log(usemouse());
const { x, y } = usemouse();


</script>
<style scoped></style>